<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
	<h:form>

		<p:dialog id="anyadirEstilosDialog" header="Añadir Estilo"
			widgetVar="anyadirEstilosDialog" resizable="false" width="500"
			showEffect="clip" modal="true" hideEffect="fold">
			<h:panelGrid columns="3" cellpadding="5">
				<h:outputLabel for="menu" value="Estilo:" />
				<p:selectCheckboxMenu id="menu"
					value="#{especialidadMB.selectedEstilos}" label="Estilos"
					filter="true" filterMatchMode="startsWith">
					<f:selectItems value="#{especialidadMB.listaEstilos}"
						var="estiloSelec" itemLabel="#{estiloSelec.nombre}"
						itemValue="#{estiloSelec.nombre}" />
				</p:selectCheckboxMenu>
				<p:commandButton value="Añadir"
					action="#{especialidadMB.anyadirEstiloEspecialidad}"
					update="especialidades"
					oncomplete="PF('anyadirEstilosDialog').hide()" />
			</h:panelGrid>
		</p:dialog>
		
		<p:dialog id="nuevaEspDialog" header="Nueva Especialidad"
			widgetVar="nuevaEspDialog" resizable="false" width="500"
			showEffect="clip" modal="true" hideEffect="fold">
			<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
				<h:outputLabel for="nombre" value="Nombre:" style="font-weight:bold" />

				<p:inputText id="nombreEspecialidadNueva"
					value="#{especialidadMB.nombreEspecialidad}" />

				<h:outputLabel for="tipoNuevo" value="Tipo:"
					style="font-weight:bold" />

				<p:selectOneMenu id="tipoNuevo"
					value="#{especialidadMB.tipoEspecialidad}">
					<f:selectItem itemLabel="Danza" itemValue="Danza" />
					<f:selectItem itemLabel="Musica" itemValue="Musica" />
					<f:selectItem itemLabel="Terapia" itemValue="Terapia" />
				</p:selectOneMenu>

				<p:commandButton value="Añadir"
					action="#{especialidadMB.crearEspecialidad}"
					update="especialidades" oncomplete="PF('nuevaEspDialog').hide()" />
			</h:panelGrid>
		</p:dialog>

		<p:dialog id="nuevoEstiloDialog" header="Nuevo Estilo"
			widgetVar="nuevoEstiloDialog" resizable="false" width="500"
			showEffect="clip" modal="true" hideEffect="fold">
			<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
				<h:outputLabel for="nombre" value="Nombre:" style="font-weight:bold" />

				<p:inputText id="nombreEstiloNuevo"
					value="#{especialidadMB.nombreEstilo}" />

				<p:commandButton value="Añadir"
					action="#{especialidadMB.crearEstilo}" update="estilos anyadirEstilosDialog"
					oncomplete="PF('nuevoEstiloDialog').hide()" />
			</h:panelGrid>
		</p:dialog>

		<p:dataTable id="estilos" var="estilo"
			value="#{especialidadMB.listaEstilos}" rowKey="#{estilo.idEstilo}"
			selection="#{especialidadMB.selectedEstilo}">

			<p:column selectionMode="single" />

			<p:column headerText="Estilos">
            	#{estilo.nombre}
        	</p:column>

			<f:facet name="footer">
				<p:commandButton id="borrarEstilo" value="Borrar" update="estilos"
					action="#{especialidadMB.borrarEstilo}" />
				<p:commandButton id="anyadirEstilo" value="Nuevo"
					oncomplete="PF('nuevoEstiloDialog').show()" />
			</f:facet>
		</p:dataTable>

		<p:dataTable id="especialidades" var="especialidad"
			value="#{especialidadMB.listaEspecialidades}"
			rowKey="#{especialidad.idEspecialidad}"
			selection="#{especialidadMB.selectedEspecialidad}">

			<p:column selectionMode="single" />

			<p:column style="width:16px">
				<p:rowToggler />
			</p:column>

			<p:column headerText="Especialidad">
            	#{especialidad.nombre}
        	</p:column>

			<p:column headerText="Tipo">
            	#{especialidad.tipo}
        	</p:column>

			<p:rowExpansion>
				<p:dataList
					value="#{especialidadMB.obtenerEstilosPorEspecialidad(especialidad)}"
					var="est" type="ordered">
					#{est.nombre}
				</p:dataList>
			</p:rowExpansion>

			<f:facet name="footer">
				<p:commandButton id="borrarEspecialidad" value="Borrar"
					update="especialidades"
					action="#{especialidadMB.borrarEspecialidad}" />
				<p:commandButton id="nuevo" value="Nueva"
					oncomplete="PF('nuevaEspDialog').show()" />
				<p:commandButton id="anyadirEstilosAEspecialidad"
					value="Añadir Estilos"
					oncomplete="PF('anyadirEstilosDialog').show()" />
			</f:facet>
		</p:dataTable>

	</h:form>
</h:body>

</html>